<!--
 * @Description:
 * @Version: 1.0
 * @Autor: haozhuang
 * @Date: 2020-04-28 14:34:17
 * @LastEditors: haozhuang
 * @LastEditTime: 2020-05-08 15:02:15
 -->
<template>
  <el-popover
    v-model="visible"
    placement="bottom"
    popper-class="Popconfirm"
    trigger="click"
  >
    <p>{{ title }}</p>
    <p class="el-row--flex is-justify-center is-align-middle">
      {{ message }}
    </p>
    <div class="el-row--flex is-justify-space-around">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="callback">确定</el-button>
    </div>
    <slot slot="reference" />
  </el-popover>
</template>

<script>
// import { mapGetters } from 'vuex'

export default {
  name: 'Popconfirm',
  props: {
    confirmCallback: {
      type: Function,
      default: a => {
        console.log(a)
      }
    },
    title: {
      type: String,
      default: a => {
        return '删除'
      }
    },
    message: {
      type: String,
      default: a => {
        return '是否删除该项目'
      }
    },
    data: {
      type: Object,
      default: a => {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {},
  created() {},
  methods: {
    callback() {
      this.visible = false
      this.confirmCallback(this.data)
    }
  }
}
</script>

<style lang="scss" scoped >
#home {
  width: 100%;
  height: 100%;
  // background: rgba(255, 255, 255, 1);
  background: rgba(249, 249, 249, 1);
  border: 16px solid #fff;
  padding-left: 59px;
  flex-direction: column;

  .title {
    height: 29px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(44, 161, 213, 1);
    line-height: 30px;
    padding: 32px 0 38px 0;
    // &:after {
    //   content: "";
    //   display: block;
    //   width: 90px;
    //   height: 2px;
    //   background: rgba(44, 161, 213, 1);
    // }

    span {
      height: 24px;
      font-size: 14px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: normal;
      color: rgba(44, 161, 213, 0.5);
      line-height: 21px;
    }
  }

  .list {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .project {
    width: 335px;
    display: inline-block;
    background: rgba(255, 255, 255, 1);
    box-shadow: 2px 2px 14px 0px rgba(0, 0, 0, 0.1);
    border-radius: 13px;
    padding: 11px 11px 0 12px;
    margin-right: 40px;

    &.active {
      border: 1px solid #3ec5ef;
    }

    &.add {
      dd {
        color: rgba(190, 190, 190, 1);
      }
      dt {
        padding-top: 70px;

        img {
          width: 58px;
          height: auto;
          display: block;
          margin: 0 auto;
        }
      }
    }

    dt {
      width: 100%;
      height: 207px;
      background: rgba(190, 190, 190, 0.2);
      border-radius: 7px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 7px;
      }
    }

    dd {
      padding: 9px 0;
      margin: 0;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #717171;

      img {
        width: 20px;
        float: right;
        margin-left: 12px;
      }
    }
  }
}
</style>
<style lang="scss">
#home {
  .image-error-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
  }
}
</style>
